// 声明that 后续给指向
let that
// 创建类
class Tab {
  // 构造函数
  constructor(id) {
    // 创建构造函数时候，将that指向实例化对象
    that = this
    this.main = document.querySelector(id)
    this.addBtn = this.main.querySelector('.firstNav .tabadd')
    this.ul = this.main.querySelector('.firstNav ul')
    this.sectionFather = this.main.querySelector('.tabscon')
    // 调用init方法 初始化
    this.init()
  }
  //  以下是绑在原型上的方法
  init() {
    // 每次调用init就会重新获取前面的li和section
    this.lis = this.main.querySelectorAll('.firstNav li')
    this.sections = this.main.querySelectorAll('.tabscon section')
    this.delBtns = this.main.querySelectorAll('.icon-guanbi')
    // 遍历 绑定每个li的点击事件
    this.lis.forEach((item, index) => {
      // 给每个li绑定索引号
      item.index = index
      item.addEventListener('click', this.toggleTab)
    })
    this.delBtns.forEach((item, index) => {
      item.index = index
      item.addEventListener('click', this.delTab)
    })
    // 给添加按钮绑定添加事件
    this.addBtn.addEventListener('click', this.addTab)
  }

  // 封装 清除所有类名
  clearClassName() {
    this.lis.forEach((item) => (item.className = ''))
    this.sections.forEach((item) => (item.className = ''))
  }

  // 切换事件
  toggleTab() {
    // 清除前面的所有高亮
    that.clearClassName()
    // 添加高亮
    this.className = 'liactive'
    that.sections[this.index].className = 'conactive'
  }

  // 添加事件
  addTab() {
    // 清除前面的所有高亮
    that.clearClassName()
    // 准备好两个带高亮的子节点
    let li = `<li class="liactive">
    <span>测试</span><span class="iconfont icon-guanbi"></span>
  </li>`
    let section = `<section class="conactive">测试</section>`
    // 使用insertAdjacent 在盒子中追加子节点
    that.ul.insertAdjacentHTML('beforeend', li)
    that.sectionFather.insertAdjacentHTML('beforeend', section)
    // 重新调用init 获取前面的lis 和 sections
    that.init()
  }

  // 删除事件
  delTab() {
    that.clearClassName()
    that.init()
    this.parentNode.remove()
    that.sections[this.index].remove()
    that.sections[this.index - 1].className = 'conactive'
  }
}
// 没写完………………

// 创建实例化对象
new Tab('#tab')
